@charset "utf-8";
/* 1.声明样式表 css指定编码集：防止乱码 */
/* 2.通用的样式 
     元素---盒模型中：内边距+内容+边框
	                *有些元素默认自带外边距：body,h1~h6,p,ul/ol
	④通用选择器：选中所有元素添加【效果】样式
	  语法：*{默认需要效果}
 */
*{
	margin: 0;
	padding: 0;
	/* 字体属性 */
	font-family: "华文彩云";
	font-size: 82px;
}
body{
	/* 背景属性【复合属性：省区部分属性值】
	background:color, image, origin 与 size, repeat 
	常用简写：imgage  size repeat
	用途：页面频繁改变位置的图片，与img元素固定在一个位置
	子属性：background-color 背景颜色属性【二选一】
	       background-img 背景图片属性【二选一】
		                 属性值：url(路径)/url(:""或'')
		    background-size 背景尺寸属性
			                属性值1个，属性值2个
							X轴【宽度】 Y轴【高度】
			background-repeat  背景平铺效果
			                 属性值no-repeat 不平铺
	*/
	background: url(../img/bg.jpg);
	/* 背景尺寸属性 */
	background-size: 100% 927px;
	/* 背景平铺属性 */
	background-repeat: no-repeat;
}
/* 熊猫 */
.bear{
	width: 200px;
	height: 300px;
	/* 判断选择器是否选中 */
	bor der: 1px solid red;
	/* 背景图片 复合属性 */
	background: url(../img/bear_1.png);
	/* 出现背景-背景图大于空间---设置背景尺寸 */
	background-size: 100% 100%;
	position: relative;
	left: 14px;
	top: 111px;
	animation: bear 8s linear infinite;
}
/* 动画：1.写关键帧 2.元素添加动画 找到元素添加动画属性
         关键帧特点，在启动元素动画位置，继承父元素：定位
		  */
@keyframes bear{
	0%{
		left: 14px;
		top: 111px;
	}
	10%{
		left: 271px;
		top: 493px;
		background: url(../img/bear_1.png);
		/* 背景尺寸： */
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
		
	}
	20%{
		left: 706px;
		top: -107px;
		background: url(../img/bear_2.png);
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
		
	}
	30%{
		left: 703px;
		top: 268px;
		background: url(../img/bear_3.png);
		background-size: 100% 100%;
		transform: rotate(36deg) scale(1);
	}
	40%{
		left: 1073px;
		top: 531px;
		background: url(../img/bear_4.png);
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
		
		}
	50%{
		left: 271px;
		top: 493px;
		background: url(../img/bear_5.png);
		background-size: 100% 100%;
		transform: rotate(128deg) scale(1);
		
		}
	60%{
		left: 426px;
		top: 296px;
		background: url(../img/bear_6.png);
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
	}
	70%{
		left: 14px;
		top: 111px;
		background: url(../img/bear_7.png);
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
	}
	80%{
		left: 706px;
		top: -107px;
		background: url(../img/bear_8.png);
		background-size: 100% 100%;
		transform: rotate(180deg) scale(1);
	}
	90%{
		left: 703px;
		top: 268px;
		background: url(../img/bear_9.png);
		background-size: 100% 100%;
		transform: rotate(204deg) scale(1);
	}
	100%{
		left: 1073px;
		top: 531px;
		background: url(../img/bear_10.png);
		background-size: 100% 100%;
		transform: rotate(360deg) scale(1);
	}
}